<meta charset="UTF-8">
<style>
    #adddevice .ivu-select-dropdown-list {
        max-height: 300px;
    }
</style>
<div id="adddevice">
    <div class="full">
        <h3 class="h3-title">{{$t("bgMgr.addDev")}}</h3>
        <div>
            <Row style="margin: 10px 0" v-if="userType < 4">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("reportForm.selectAccount")}} : &nbsp;</i-col>
                <i-col span="8">
                    <el-select v-model="createrToUser" style="width: 100%;" size="mini" filterable>
                        <el-option v-for="item in userlists" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </i-col>
            </Row>
            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("alarm.devNum")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="deviceid"></i-input>
                </i-col>
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("alarm.devName")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="devicename"></i-input>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("user.devType")}} : &nbsp;</i-col>
                <i-col span="8">
                    <el-select v-model="devicetype" style="width: 100%;" size="mini" filterable>
                        <el-option v-for="item in deviceTypeList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </i-col>
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.sim")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="simnum"></i-input>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("device.tutelageUser")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="monitor"></i-input>
                </i-col>
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("bgMgr.expirenotifytime")}} : &nbsp;</i-col>
                <i-col span="8">
                    <date-picker type="date" v-model="overduetime" :options="dateOptions" style="width: 100%"></date-picker>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("user.grouping")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-select v-model="groupid">
                        <i-option v-for="item in groupsList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                    </i-select>
                </i-col>
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("device.networkType")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-select v-model="teltype">
                        <i-option value="1">{{$t("reportForm.maxSignal")}}32(2G)</i-option>
                        <i-option value="2">{{$t("reportForm.maxSignal")}}64(2G)</i-option>
                        <i-option value="3">{{$t("reportForm.maxSignal")}}32(3G)</i-option>
                        <i-option value="4">{{$t("reportForm.maxSignal")}}32(4G)</i-option>
                    </i-select>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.allowLogin")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-select v-model="loginenable">
                        <i-option value="0">{{$t("user.ban")}}</i-option>
                        <i-option value="1">{{$t("user.allow")}}</i-option>
                    </i-select>
                </i-col>
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.isUse")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-select v-model="deviceenable">
                        <i-option value="0">{{$t("user.ban")}}</i-option>
                        <i-option value="1">{{$t("user.allow")}}</i-option>
                    </i-select>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;"></i>&nbsp;{{$t("device.loginPwd")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="loginpwd" :placeholder="$t('device.pwdTips')"></i-input>
                </i-col>
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("device.timeZone")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-select v-model="timezone">
                        <i-option value="99">{{$t("device.automatic")}}</i-option>
                        <i-option value="-12">-12</i-option>
                        <i-option value="-11">-11</i-option>
                        <i-option value="-10">-10</i-option>
                        <i-option value="-9">-9</i-option>
                        <i-option value="-8">-8</i-option>
                        <i-option value="-7">-7</i-option>
                        <i-option value="-6">-6</i-option>
                        <i-option value="-5">-5</i-option>
                        <i-option value="-4">-4</i-option>
                        <i-option value="-3">-3</i-option>
                        <i-option value="-2">-2</i-option>
                        <i-option value="-1">-1</i-option>
                        <i-option value="0">0</i-option>
                        <i-option value="1">+1</i-option>
                        <i-option value="2">+2</i-option>
                        <i-option value="3">+3</i-option>
                        <i-option value="4">+4</i-option>
                        <i-option value="5">+5</i-option>
                        <i-option value="6">+6</i-option>
                        <i-option value="7">+7</i-option>
                        <i-option value="8">+8</i-option>
                        <i-option value="9">+9</i-option>
                        <i-option value="10">+10</i-option>
                        <i-option value="11">+11</i-option>
                        <i-option value="12">+12</i-option>
                        <i-option value="13">+13</i-option>
                        <i-option value="14">+14</i-option>
                    </i-select>
                </i-col>
            </Row>
            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("device.calmileageway")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-select v-model="calmileageway">
                        <i-option value="0">{{$t("device.automatic")}}</i-option>
                        <i-option value="1">{{$t("device.devCalc")}}</i-option>
                        <i-option value="2">{{$t("device.platformCalc")}}</i-option>
                    </i-select>
                </i-col>

                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("monitor.remarks")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="remark" type="textarea" :rows="1"></i-input>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="20" :offset="4">
                    <Alert type="warning">
                        <h3>{{$t("device.addNewDeviceTip1")}}</h3>
                        <p v-if="isZh">
                            {{$t("device.addNewDeviceTip2")}}
                        </p>
                        <p v-if="isZh">
                            {{$t("device.addNewDeviceTip3")}}
                        </p>
                        <p v-if="isZh">
                            {{$t("device.addNewDeviceTip4")}}
                        </p>
                    </Alert>
                </i-col>
            </Row>


            <Row style="margin: 10px 0">
                <i-col span="6" :offset="7">
                    <i-button style="width: 100%" @click="handleSubmit">{{$t("bgMgr.submit")}}</i-button>
                </i-col>
                <i-col span="6" :offset="1">
                    <i-button style="width: 100%" @click="resetInfo">{{$t("bgMgr.reset")}}</i-button>
                </i-col>
            </Row>
        </div>
    </div>
    <script>
        vueInstanse = new Vue({
            el: "#adddevice",
            i18n: utils.getI18n(),
            data: {
                dateOptions: {
                    disabledDate: function(date) {
                        return date && date.valueOf() < Date.now() - 86400000;
                    }
                },
                isZh: isZh,
                teltype: '',
                timezone: '99',
                calmileageway: '0',
                iconState: "ios-arrow-down",
                deviceid: "",
                devicename: "",
                devicetype: "",
                remark: '',
                simnum: "",
                overduetime: "",
                loginpwd: "",
                loginenable: "1",
                deviceenable: "1",
                groupsList: [],
                deviceTypeList: [],
                groupid: 0,
                checkboxObj: {},
                createrToUser: "",
                userlists: [],
                userType: null,
                timeoutIns: null,
                monitor: "",
            },
            methods: {
                handleSubmit: function() {
                    var me = this;
                    var url = myUrls.addDevice();

                    if (this.deviceid.length < 8 || this.deviceid.length > 15) {
                        me.$Message.error(me.$t("device.devIdTips"));
                        return;
                    };

                    if (this.overduetime == "") {
                        me.$Message.error(me.$t("message.fullComplete"));
                        return;
                    };

                    if (this.devicetype === "") {
                        me.$Message.error(me.$t("message.selectDeviceTtypeTips"));
                        return;
                    }

                    var data = {
                        deviceid: this.deviceid,
                        devicetype: this.devicetype,
                        expirenotifytime: new Date(this.overduetime).getTime(),
                        loginenable: Number(this.loginenable),
                        deviceenable: Number(this.deviceenable),
                        timezone: Number(this.timezone),
                        calmileageway: Number(this.calmileageway),
                    };

                    if (this.devicename) data.devicename = this.devicename;
                    if (this.teltype) data.teltype = Number(this.teltype);

                    if (this.monitor) {
                        data.monitor = this.monitor;
                    }

                    if (this.remark) {
                        data.remark = this.remark;
                    }

                    if (this.loginpwd) {
                        data.loginpwd = $.md5(this.loginpwd);
                    } else {
                        var legnth = this.deviceid.length;
                        data.loginpwd = $.md5(this.deviceid.substring(legnth - 4, legnth));
                    };

                    if (this.simnum) {
                        data.simnum = this.simnum;
                    };

                    if (this.groupid) {
                        data.groupid = this.groupid;
                    };


                    if (globalUserList.indexOf(this.createrToUser) == -1) {
                        me.$Message.error(me.$t("message.selectCorrectAccount"));
                        return;
                    }

                    if (this.userType < 4) {
                        data.creater = this.createrToUser;
                    } else {
                        data.creater = userName;
                    };

                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            rootuser = null;
                            isNeedRefresh = true;
                            me.$Message.success(me.$t("message.addSucc"));
                        } else if (resp.status == -1) {
                            if (resp.cause !== null && resp.cause.indexOf("token") != -1) {
                                window.location.href = "index.html";
                            } else {
                                me.$Message.error(me.$t("message.addFail"));
                            }
                        } else if (resp.status == 1) {
                            me.$Message.error(me.$t("message.IDRepeat"));
                        } else if (resp.status == 2) {
                            me.$Message.error(me.$t('message.IDError'));
                        } else if (resp.status == 3) {
                            me.$Message.error(me.$t('message.reqFail'));
                        };
                    });
                },
                resetInfo: function() {
                    this.deviceid = "";
                    this.devicename = "";
                    this.devicetype = 1;
                    this.simnum = "";
                    // this.overduetime = "";
                    this.loginpwd = "";
                    this.loginenable = "1";
                    this.deviceenable = "1";
                    this.groupid = "";
                },
                getDeviceType: function() {
                    var me = this;
                    var deviceTypes = vstore.state.deviceTypes;
                    for (var key in deviceTypes) {
                        var item = deviceTypes[key];
                        if (item) {
                            var label = item.typename;
                            if (item.remark) {
                                label += "(" + (isZh ? item.remark : item.remarken) + ")";
                            }
                            me.deviceTypeList.push({
                                value: item.devicetypeid,
                                label: label
                            });
                        }
                    }
                    me.devicetype = 1;
                },
                queryGroupsByUserName: utils.debounce(function(userName) {
                    var data = {
                            username: userName
                        },
                        url = myUrls.queryGroupsByUserName(),
                        me = this;
                    utils.sendAjax(url, data, function(resp) {
                        var groupList = [{
                            label: isZh ? '默认组' : 'Default',
                            value: 0
                        }];
                        if (resp.status === 0 && resp.grouplist) {
                            resp.grouplist.forEach(function(group) {
                                groupList.push({
                                    label: group.groupname,
                                    value: group.groupid
                                });
                            })
                        }
                        me.groupsList = groupList;
                    });
                }, 1000)
            },
            watch: {
                createrToUser: function(newVal) {
                    if (globalUserList.indexOf(newVal) != -1) {
                        this.groupid = 0;
                        this.queryGroupsByUserName(newVal);
                    }
                }
            },
            mounted: function() {
                this.getDeviceType();
                this.createrToUser = userName;
                var userlists = [];
                globalUserList.forEach(function(item) {
                    userlists.push({
                        label: item,
                        value: item,
                    })
                })
                this.userlists = userlists;
                this.overduetime = new Date(Date.now() + 365 * 24 * 3600 * 1000);
                this.userType = vstore.state.userType;
            }
        })
    </script>
</div>